<template>
	<view class="gallery-index">
	    <view>
	      
	    </view>
<!-- 	    <view class="gallery-van-tabs">
	      <tabs v-model="activeName">
	        <tab title="建房图纸" name="drawing">
	          <gallery-drawing></gallery-drawing>
	        </tab>
	        <tab title="装修效果图" name="effect">
	          <gallery-effect></gallery-effect>
	        </tab>
	        <tab title="3D设计" name="design">
	          <gallery-design></gallery-design>
	        </tab>
	      </tabs>
	    </view> -->
		
		<!-- <swiper indicator-color="white" class="index_swipe">
		  <swiper-item v-for="(image, index) in images" :key="index">
		    <image :src="image" style="" />
		  </swiper-item>
		</swiper> -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(image, index) in images" :key="index">
			  <image :src="image" style="" />
			</swiper-item>
		</swiper>
		<view class="end-title">
		     <view v-for="(item,index) in items" :key="index" :class="{btna:count == index}" @tap="change(index)">
		        {{item}}
		    </view>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 0}">
		　<gallery-drawing></gallery-drawing>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 1}">
		　　	          <gallery-effect></gallery-effect>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 2}">
		　　<gallery-design></gallery-design>
		</view>
	  </view>
</template>

<script>
	import axios from "axios";
	   import galleryDrawing from './index/gallery_drawing';
	    import galleryEffect from './index/gallery_effect';
	    import galleryDesign from './index/gallery_design';
	export default {
		data() {
			return {
				 images: "",
				 activeName: 'drawing',
				  btnnum: 0,
				       items:["基本信息","公告信息","换区信息"],
				       count:"",
			}
		},
		   components: {
		        galleryDrawing,galleryEffect,galleryDesign
		      },
		created() {
				axios.get("http://localhost:5632/images_icon").then((_e) => {
				  this.images = _e.data;
				});
						
				axios.get("http://localhost:5632/getgoods_icon").then((_d) => {
				  this.goods_icon = _d.data;
				});
				
		      },
		methods: {
	
change(e) {
     this.count = e
     this.btnnum = e
     console.log(this.count)
  }
			
			
		}
	}
</script>

<style scoped>
 .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .end-title{
          display: flex;
      }
      .end-title view{
          flex-grow: 1;
          text-align: center;
      }
      .end-cont{
          display: none;
          background: #fff;
      }
      .btna{
          color: #FFFFFF;
          background: #00A0FF;
      }
      .dis{
          display: block;
      }
</style>
